<template>
  <div id="addUser">
    <div class="head">
      <div>
        <p class="p1">1.账号信息&nbsp;&nbsp;</p>
        <p>&nbsp;&nbsp;————&nbsp;&nbsp;2.企业信息&nbsp;&nbsp;</p>
        <p>————&nbsp;&nbsp;3.收款信息</p>
      </div>
    </div>
    <div class="content">
      <!-- 点击添加用户对话框 -->
      <!-- 添加用户表单 -->
      <el-form :model="addUser" :rules="addUserRules" ref="addUser">
        <el-form-item label="手机号码" prop="email">
          <el-input v-model="addUser.email" />
        </el-form-item>
      </el-form>
      <el-form :model="addUser" :rules="addUserRules" ref="addUser">
        <el-form-item label="密码" prop="phone">
          <el-input v-model="addUser.phone" show-password></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="addUser" :rules="addUserRules" ref="addUser">
        <el-form-item label="确认密码" prop="password">
          <el-input v-model="addUser.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <el-button type="info" @click="submit">注册</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "addUser",
  data() {
    // 验证电话号码是否正确
    let checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb();
      }
      cb(new Error("请输入合法的邮箱"));
    };
    // 判断密码格式是否正确
    let oPassword = (rule, value, ad) => {
      const aPassword = /^[0-9]{6,18}$/; //验证密码数字6-8位
      if (aPassword.test(value)) {
        //密码格式正确
        return ad();
      }
      ad(new Error("请输入正确的格式"));
    };

    // 判断两次密码是否一样
    let aPassword = (rule, value, db) => {
      if (value === this.addUser.phone) {
        //判断两次输入的密码是否一致
        // 密码一致
        return db();
      }
      db(new Error("请输入正确的密码"));
    };

    return {
      //添加用户
      addUser: {
        email: "15881041458",
        phone: "123456",
        password: "123456",
      },
      addUserRules: {
        // 这是邮箱
        email: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
          {
            validator: checkEmail,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],

        // 这是密码
        phone: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            validator: oPassword,
            message: "请输入正确的密码格式：6-18位数字",
            trigger: "blur",
          },
        ],

        // 判断两次密码是否一致
        password: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur",
          },
          {
            validator: aPassword,
            message: "两次输入的密码不一致，请重试",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      const regEmail =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/; //邮箱正则
      const iPassword = /^[0-9]{6,18}$/; //密码正则 -- 6-18位
      if (
        !regEmail.test(this.addUser.email) ||
        !iPassword.test(this.addUser.phone) ||
        this.addUser.password !== this.addUser.phone
      ) {
        return this.$message.error("请检查您所输入的邮箱/密码格式是否正确");
      } else {
        this.$axios({
          url: "http://172.16.113.187:8080/userSettle/register",
          method: "post",
          data: {
            postbox: this.addUser.email,
            pwd: this.addUser.phone,
          },
        })
          .then((res) => {
            if (res.code === 200) {
              this.$router.push("/home/merchants/enterprise");
              this.$message({
                message: "注册成功",
                type: "success",
              });
            } else if (res.code === 50012) {
              this.$message({
                message: "该手机号已经被注册了",
                type: "warning",
              });
            }
          })
          .catch((err) => {
            console.log("注册失败", err);
          });
        localStorage.setItem("data", JSON.stringify(this.addUser));
        // this.$router.push('/home/merchants/enterprise')
      }
    },
  },
};
</script>
<style lang="less" scoped>
// * {
//   margin: 0;
//   padding: 0;
// }
html,
body,
#app {
  width: 100%;
  height: 100%;
}

.head {
  // width: 100%;
  margin-top: 50px;
  height: 30px;
  // border: 1px solid red;
  text-align: center;
  div:nth-of-type(1) {
    width: 34%;
    height: 30px;
    // border: 1px solid salmon;
    margin: auto;
  }
  p {
    // height: 30px;
    float: left;
    line-height: 30px;
  }
  .el-form-item__label {
    width: 300px;
  }
}
.content {
  margin: auto;
  margin-top: 100px;
  width: 40%;
  height: 50%;
  // border: 1px solid red;
  text-align: center;
}
.el-input:nth-of-type(1) {
  margin-left: 20px;
}
.el-input {
  width: 300px;
  float: right;
}
.el-form {
  margin-bottom: 20px;
}
/deep/.el-form-item__error {
  left: 190px;
}
.p1{
  color: #c280ff;
}
</style>
